<template>
  <div>

    <el-dialog :title="Id==undefined?'新增':'修改'" :visible.sync="deitOpen" width="50%" :before-close="closeDelDialog">
      <el-form ref="addForm" :rules="rules" :model="addForm" label-width="120px" :modal-append-to-body="false">
        <el-row>
          <el-col :span="12">
            <el-form-item label="任务编号" prop="assignmentNumber">
              <el-input v-model="addForm.assignmentNumber" placeholder="请输入任务编号" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务名称" prop="assignmentName">
              <el-input v-model="addForm.assignmentName" placeholder="请输入任务名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="执行方式" prop="executionMode">
              <el-select v-model="addForm.executionMode" placeholder="请选择执行方式" clearable style="width: 100%" @change="executionModeChange">
                <el-option v-for="item in executionModeList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备份方式" prop="backupMethod">
              <el-select v-model="addForm.backupMethod" placeholder="请选择备份方式" clearable style="width: 100%">
                <el-option v-for="item in backupMethodList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" v-if="addForm.executionMode=='1'">
            <el-form-item label="执行表达式" prop="executeExpression">
              <div style="display: flex;">
                <el-input v-model="addForm.executeExpression" class="inp" placeholder="请选择cron表达式"></el-input>
                <el-button type="primary" @click="showDialog" style="margin-left: 10px;" size="mini">生成 cron</el-button>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原地址" prop="originalAddress">
              <el-input v-model="addForm.originalAddress" placeholder="请选择原地址" @focus="onBlurAddressTap" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备份地址" prop="backupAddress">
              <el-input v-model="addForm.backupAddress" placeholder="请选择备份地址" @focus="onBlurBackupAddressTap"  ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="addForm.executionMode=='1'">
            <el-form-item label="启动状态" prop="startupStatus">
              <el-switch v-model="addForm.startupStatus" active-value="1" inactive-value="0"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
        <el-button @click="closeDelDialog">取 消</el-button>
      </div>



    </el-dialog>

    <!--start cron 正则 -->
    <el-dialog title="生成 cron" :visible.sync="showCron" width="40%">
      <vcrontab @hide="showCron = false" @fill="crontabFill" :expression="expression"></vcrontab>
    </el-dialog>
    <!--end cron 正则 -->

    <!--start 源地址 -->
    <deitAddress v-if="deitAddressOpen" :deitAddressOpen="deitAddressOpen" :istitle="addressTitle"
      @closeAddressDelDialog="closeAddressDelDialog" @deitAddressSubmit="deitAddressSubmit"></deitAddress>
    <!-- end 源地址 -->
  </div>
</template>
<script>
//单独引入
import vcrontab from "vcrontab"; //icon表达式插件
import { filebackupAdd,filebackupDeit,filebackupInfo} from "@/api/cqbc/backupRestore/filebackup.js"
import deitAddress from "@/views/cqbc/backupRestore/filebackup/deitAddress.vue"
export default {
  props: ["deitOpen", 'Id'],
  watch: {
    Id: {
      handler(val) {
        if(val!=undefined){ //修改
          filebackupInfo(val).then(res=>{
            this.addForm=res.data
          })
        }
      },
      immediate: true
    }
  },

  components: {
    vcrontab, deitAddress
  },
  data() {
    return {
      input: "",
      expression: "",
      showCron: false,
      addForm: {
        assignmentNumber: undefined, //任务编号
        assignmentName: undefined, //任务名称
        executionMode: undefined, //执行方式 必需 0：手动 1自动
        backupMethod: undefined,//备份方式 必需 0：增量 1全量
        executeExpression: undefined,//定时任务表达式可选
        originalAddress: undefined,//原路径
        backupAddress: undefined,//备份路径
        startupStatus: undefined,//是否开启  0未开启 1已开启
      },
      ishide: false,
      // 表单校验
      rules: {
        assignmentNumber: [
          { required: true, message: '请输入任务编号', trigger: 'blur' },
        ],
        assignmentName: [
          { required: true, message: '请输入任务名称', trigger: 'blur' },
        ],
        executionMode: [
          { required: true, message: '请选择执行方式', trigger: 'blur' },
        ],
        backupMethod: [
          { required: true, message: '请选择备份方式', trigger: 'blur' },
        ],
        executeExpression: [
          { required: false, message: '请选择cron表达式', trigger: 'blur' },
        ],
        originalAddress: [
          { required: true, message: '请选择原路径', trigger: 'blur' },
        ],
        backupAddress: [
          { required: true, message: '请选择备份路径', trigger: 'blur' },
        ],
        startupStatus: [
          { required: false, message: '请选择启动状态', trigger: 'blur' },
        ],
      },
      deitAddressOpen: false, //原地址，备份地址
      addressTitle: "",//地址弹窗
      executionModeList: [  //执行方式列表 0：手动 1自动
        {
          value: "0",
          label: "手动"
        }, {
          value: "1",
          label: "自动"
        }
      ],
      backupMethodList: [ //备份方式 0：增量 1全量
        {
          value: "0",
          label: "增量"
        }, {
          value: "1",
          label: "全量"
        }
      ]
    }
  },
  created() {
    const timestamp = Date.parse(new Date());
    this.addForm.assignmentNumber=timestamp;
  },
  methods: {
    crontabFill(value) {
      //确定后回传的值
      this.addForm.executeExpression = value;
    },
    //执行方式 必需 0：手动 1自动 下拉选择 判断表达式 启动状态是否必填项
    executionModeChange(val){
      var that=this;
      if(val==1){ //判断表达式 启动状态是否必填项
        that.rules.executeExpression[0].required=true;
        that.rules.startupStatus[0].required=true;
      }else{
        that.rules.executeExpression[0].required=false;
        that.rules.startupStatus[0].required=false;
      }
    },
    showDialog() {
      this.expression =  this.addForm.executeExpression;//传入的 cron 表达式，可以反解析到 UI 上
      this.showCron = true;
    },
    closeDelDialog() {
      this.$emit("closeDelDialog")
    },
    //备份地址弹窗
    onBlurBackupAddressTap() {
      this.deitAddressOpen = true;
      this.addressTitle = "backupAddress"
    },
    //原地址弹窗
    onBlurAddressTap() {

      this.deitAddressOpen = true;
      this.addressTitle = "originalAddress"
    },
    //关闭原地址、备份地址弹窗
    closeAddressDelDialog() {
      this.deitAddressOpen = false;
    },
    //地址提交
    deitAddressSubmit(val) {
      var that = this;
      if (val.istitle == 'backupAddress') { //备份地址
        this.addForm['backupAddress'] = val.filePath
      } else { //原地址
        this.addForm['originalAddress'] = val.filePath
      }
      this.$refs.addForm.clearValidate();
      this.deitAddressOpen = false;
    },

    submitForm(addForm){

      this.$refs[addForm].validate((valid) => {
          if (valid) {
            if(this.Id!=undefined){ //修改
              filebackupDeit(this.addForm).then(res=>{
              if(res.code=="200"){
                this.$modal.msgSuccess("修改成功");
              this.$emit("addsubmitForm")
              }

            })
            }else{ //添加
              filebackupAdd(this.addForm).then(res=>{
              console.log(res)
              if(res.code=="200"){
                this.$modal.msgSuccess("新增成功");
              this.$emit("addsubmitForm")
              }

            })
            }

          } else {
            console.log('error submit!!');
            return false;
          }
        });
    }
  }
}

</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
</style>

